<template>
  <div class="form-group" style="padding-right:30px;">
    <div class="row">
      <div class="col-lg-12">
        <span>顧客条件</span>
      </div>
    </div>
    <div class="row" style="margin-top:5px;">
      <div class="col-lg-12">
        <label class="radio-inline">
          <input type="radio" name="goodsTypeName" value="all" v-model="customerTypeComputed" /><span class="contentStyle">全顧客</span>
        </label>
        <label class="radio-inline">
          <input type="radio" name="goodsTypeName" value="member" v-model="customerTypeComputed" /><span class="contentStyle">会員</span>
        </label>
        <label class="radio-inline">
          <input type="radio" name="goodsTypeName" value="group" v-model="customerTypeComputed" /><span class="contentStyle">顧客グループ</span>
        </label>
      </div>
    </div>
    <div class="row" style="margin-top:5px;" v-show="customerType === 'member'">
      <div class="col-lg-12">
        <div class="form-inline"  style="margin-bottom:5px;">
          <label class="contentStyle" style="width:35px;">性別:</label>
          <select class="form-control input-sm" style="width:calc(100% - 35px)" v-model="customerProperty.sex">
            <option v-for="value in genderList" :key="value" :value="value">{{value}}</option>
          </select>
        </div>
        <div class="form-inline">
          <label class="contentStyle" style="width:35px;">年代:</label>
          <select class="form-control input-sm" style="width:calc(50% - 25px)" v-model="customerProperty.ageStart">
            <option v-for="(value,key) in ageList" :key="key" :value="key">{{value}}</option>
          </select>
          <span style="width:15px;display:inline-black;text-align:center;">～</span>
          <select class="form-control input-sm" style="width:calc(50% - 25px)" v-model="customerProperty.ageEnd">
            <option v-for="(value,key) in ageList" :key="key" :value="key">{{value}}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top:5px;" v-show="customerType === 'group'">
      <div class="col-lg-12">
        <input
          type="button"
          value="顧客グループ選択"
          id="customer_vue"
          class="form-control input-sm"
          @click="show()"
        />
      </div>
    </div>
  </div>
</template>
<script>
import cus from 'cus';
export default {
  name: 'customerComponent',
  data() {
    return {
      customer: new cus(window.$),
      genderList: ['指定なし', '男性', '女性', '不明'],
      ageList: {
        '0': '20代未満',
        '20': '20代',
        '30': '30代',
        '40': '40代',
        '50': '50代',
        '60': '60代',
        '70': '70代',
        '999': '80代以上'
      }
    };
  },
  props: {
    company: {
      type: String
    },
    customerObj: {
      type: Object
    },
    isfav: {
      type: Object
    },
    customerType: {
      type: String
    },
    customerProperty:{
      type:Object
    }
  },
  watch: {
    company() {
      this.initModule();
      if (this.isfav.customer) {
        this.isfav.customer = false;
      } else {
        this.$emit('chooseCustomer', {});
        this.customerProperty.sex='指定なし';
        this.customerProperty.ageStart='0';
        this.customerProperty.ageEnd='999';
      }
    },
    customerObj: {
      handler() {
        if (
          this.customerObj.groups !== undefined &&
          this.customerObj.groups !== ''
        ) {
          window.$('#customer_vue').val('選択済み');
        } else {
          window.$('#customer_vue').val('顧客グループ選択');
        }
      }
    },
    'customerProperty.ageStart'(){
      if(Number.parseInt(this.customerProperty.ageStart) > Number.parseInt(this.customerProperty.ageEnd)){
        this.customerProperty.ageStart = this.customerProperty.ageEnd;
      }
    },
    'customerProperty.ageEnd'(){
      if(Number.parseInt(this.customerProperty.ageEnd) < Number.parseInt(this.customerProperty.ageStart) ){
        this.customerProperty.ageEnd = this.customerProperty.ageStart;
      }
    }
  },
  computed:{
    customerTypeComputed:{
      get(){
        return this.customerType;
      },
      set(value){
        this.$emit('update:customerType',value);
      }
    }
  },
  methods: {
    show() {
      this.customer.setCustomer(this.customerObj);
      this.customer.show();
    },
    initModule() {
      var vm = this;
      this.customer.init({
        usercd: global.userCd,
        kigyo: [this.company],
        elementId: 'customer_vue',
        tab: 'k-p-s',
        callback: {
          afterSelectedOk: function() {
            vm.$emit('chooseCustomer', vm.customer.getCustomer());
          }
        }
      });
    }
  },
  mounted() {
    var vm = this;
    var waitData = window.setInterval(function() {
      if (vm.company !== undefined && vm.company !== '') {
        vm.initModule();
        clearInterval(waitData);
      }
    }, 300);
  }
};
</script>
<style scoped>
      .contentStyle{
            font-weight: normal !important;
      }
</style>